<script setup>

import {computed, ref,watchEffect,onMounted} from 'vue'
// 判断
let tell=ref(false)
let data=ref("")
let dataType=ref("all")
// 数据
//  const db=ref([
//     {id:1,
//     title:"今天睡觉到11点",
//     alter:false
//     },
//     {id:2,
//     title:"今晚打老虎",
//     alter:true
//     },
//     {
//       id:3,
//       title:"今天吃什么",
//       alter:false
//     }
// ])
// 本地
// 实现方法
// 1.先从获取
// /2.将得到的值传入db中
// 3.监听，新增
const loadFromStorage=()=>{
  try {
    // 从本地获取数据
    const saveData=localStorage.getItem("todos")
    return saveData?JSON.parse(saveData):[]
  } catch (error) {
    return[]
  }
}
const db = ref(loadFromStorage())
// 监听数据变化 watchEffect是 Vue3 中用于‌自动追踪响应式依赖‌的监听方式，其核心机制是通过执行回调函数时自动收集当前作用域内的响应式依赖项
// 特性
// 1.自动依赖追踪‌
// 在回调函数执行过程中，所有被访问的响应式属性（ref/reactive）会被自动标记为依赖项
// 2.立即执行特性‌
// 初始化时会立即执行一次回调，并在依赖变化时重新执行
watchEffect(() => {
  // 将其变为一个字符串
  localStorage.setItem('todos', JSON.stringify(db.value))
})
const  del=function (id) {
  // 误删
  if (confirm("是否删除？？？")) {
    const index=db.value.findIndex(item=>item.id===id)
if (index!==-1) {
  db.value.splice(index,1)
}
  }

}
// 新增
const todoAdd=  function () {
  // 获取数据
  // 过滤
  if ( /^[\u4e00-\u9fa5]+$/.test(data.value)) {
    let todoData={
    id:db.value.length+1,
   title: data.value,
   alert:false
  }
  // 传入数组
db.value.push(todoData)
  data.value=""
  }

}
const  allBtn=function (){
  dataType.value="all"
}
const  countBtn=function (){
  dataType.value="count"
}
const  compBtn=function (){
  dataType.value="comp"
}
// 分类
// 分类切换  点击切换渲染的对象

let filterDb=computed(
    ()=>{
      if (dataType.value=="all"){
 return db.value
      }
      if (dataType.value=="count"){
        return db.value.filter(item=>!item.alter)
      }
      if (dataType.value=="comp"){
        return  db.value.filter(item=>item.alter)
      }
    }
)
</script>

<template>
  <div class="box">
    <div class="border">
      <h3>备忘录</h3>
      <div><input type="text" placeholder="请输入....." v-model="data" class="txt" v-on:keyup.enter="todoAdd"></div>
    </div>
    <div class="center">
      <ul v-for="index in filterDb" key="index" >
        <li >
          <input type="checkbox" v-model="index.alter" class="todoChenbox">
          <span :class="{completed:index.alter}">{{index.title}}</span>
          <button type="button"  @click="del(index.id)" class="del_Btn">删除</button>
          </li>
      </ul>
    </div>
    <div class="down">
      <div class="downLast">
        共计：{{ db.length }}
      </div>
     <div class="downRight">
<!--   分类-->
<!--       要求当按下时切换-->
      <input type="button" value="全部" @click="allBtn"   class="downBtn">
      <input type="button" value="未完成"  @click="countBtn"  class="downBtn">
      <input type="button" value="已完成"  @click="compBtn"  class="downBtn">
     </div>

    </div>
  </div>
</template>




<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border-radius: 5px;
}
*{
  padding: 0px;
  margin: 0px;
}
.div{
  display: flex;
}
.box {
  width: 500px;
  height: 600px;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: burlywood;
}

.border {
  width: 500px;
  height: 100px;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}
.txt{
  width: 300px;
  height: 20px;
  margin-top: 20px;
  display: flex;
 padding: 3px;
}
.down{
  width: 100%;
  height: 100px;
  border: 1px solid #000;
}
.center{
  width:500px ;
  height: 400px;
  border: 1px solid #000;
/* 添加滚动条 */
  overflow-y: auto;
}
li{
  /* 取消小圆点 */
  list-style: none;
}
.todoChenbox{
  margin-left: 10px;
}
.del_Btn{
  background-color: #ff4444;
  margin-left: auto;
  color: white;
  border-radius: 5px;
}
.downBtn{
  border: none;
  margin-left: 5%;
  background-color: burlywood;
}
li{
  display: flex;
align-items: center;
padding: 8px;

}
.completed {
  /* 删除的下划线 */
  text-decoration: line-through;
  color: #0a0a0a;
}
</style>
